<template>
  <div id="app">
    <div id="question-balls">
      <span v-for="i in total" :key="i" :class="{ gray: randedNumbers.includes(i) }">{{ i }}</span>
    </div>
    <div id="rand-box">
      <div id="rand-number">{{ randNumber }}</div>
      <div id="rand-btns">
        <span :class="isRanding ? 'stop': 'start'" @click="start">{{isRanding ? '结束': '开始'}}</span>
        <span
          :class="['jump', randNumber !== 0 && !isRanding ? 'show': 'hide' ]"
          @click="handleJump"
        >
          跳转至 {{ randNumber }}
        </span>
        <span class="reset" @click="reset">重置</span>
      </div>
    </div>

    <div id="top-mask" :class="showTopMask ? 'show': 'hide'">
      <div id="question-box">
        <div id="left">
          <img :src="questionImageUrl" alt="" srcset="">
        </div>
        <div id="right" :class="showAnswers ? 'show': 'hide'">
          <span v-for="(ans, idx) in answers" :key="idx">{{ idx + 1 }}、{{ ans }}</span>
        </div>
      </div>
      <div id="question-btns">
        <span v-if="showAnswers" class="back" @click="showTopMask = false, showAnswers = false">
          返回
        </span>
        <span v-if="!showAnswers" class="show-answers" @click="handleShowAnswers">显示答案</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'App',
  data() {
    return {
      isRanding: false,
      randNumber: 0,
      timer: null,
      total: 21,
      showTopMask: false,
      showAnswers: false,
      // eslint-disable-next-line global-require
      questionImageUrl: null,
      allAnswers: [
        /**
         * ^(.{4})\n(.{4})\n(.{4})\n(.{4})
         * ['$1', '$2', '$3', '$4'],
         */
        ['喜上眉梢', '妖魔鬼怪', '余音绕梁', '盲人摸象'],
        ['鸡飞蛋打', '心照不宣', '人走茶凉', '刀光剑影'],
        ['七嘴八舌', '悲喜交加', '雷声震耳', '舍己救人'],
        ['眉目传情', '猪朋狗友', '一针见血', '愁眉苦脸'],
        ['指腹为婚', '一拍即合', '花好月圆', '骑虎难下'],
        ['虎头虎脑', '吹吹打打', '返老还童', '趾高气扬'],
        ['恶语伤人', '望眼欲穿', '一鸣惊人', '掩人耳目'],
        ['鸡飞狗跳', '刻舟求剑', '犀牛望月', '一见钟情'],
        ['心口不一', '吉人天相', '心心相印', '吹牛拍马'],
        ['群龙无首', '鸡飞狗跳', '车水马龙', '吉凶祸福'],
        ['惊天动地', '望穿秋水', '人仰马翻', '掩耳盗铃'],
        ['走马观花', '鸡犬升天', '九九归一', '携手并肩'],
        ['守株待兔', '笔走龙蛇', '千真万确', '一锤定音'],
        ['杯水车薪', '鸡鸣而起', '归心似箭', '笔头生花'],
        ['魑魅魍魉', '嘴甜心苦', '猴年马月', '零零星星'],
        ['马马虎虎', '指桑骂槐', '人山人海', '移花接木'],
        ['狼烟四起', '心照不宣', '琴棋书画', '千夫所指'],
        ['海啸山崩', '人声鼎沸', '全心全意', '衣食父母'],
        ['众望所归', '生龙活虎', '星罗棋布', '侯门似海'],
        ['红男绿女', '前因后果', '书香门第', '拨云见日'],
        ['放虎归山', '小鸟依人', '耳目一新', '海枯石烂'],
      ],
      answers: [],
    };
  },
  computed: {
    ...mapGetters([
      'randedNumbers',
    ]),
  },
  methods: {
    ...mapActions([
      'addRandedNumber',
      'resetRandedNumber',
    ]),
    start() {
      if (!this.isRanding) {
        if (this.randedNumbers.length === this.total) {
          alert('已经全部随机完了呢');
          return;
        }
        this.timer = setInterval(() => {
          this.randNumber = this.randNoRepeatInteger(1, this.total);
        }, 50);
      } else {
        clearInterval(this.timer);
      }
      this.isRanding = !this.isRanding;
    },
    randNoRepeatInteger(min = 1, max = 100) {
      const r = Math.floor(Math.random() * (max - min + 1) + min);
      return this.randedNumbers.includes(r) ? this.randNoRepeatInteger(min, max) : r;
    },
    handleJump() {
      // eslint-disable-next-line
      this.questionImageUrl = require(`@/assets/images/${this.randNumber}.jpg`);
      this.answers = this.allAnswers[this.randNumber - 1];
      this.showTopMask = true;
    },
    handleShowAnswers() {
      this.showAnswers = true;
      this.addRandedNumber(this.randNumber);
    },
    reset() {
      this.resetRandedNumber();
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  user-select: none;
}
#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: url("~@/assets/images/default_bg.jpg") center -80px;
  text-align: center;
  color: #2c3e50;
}

#question-balls {
  position: fixed;
  width: 98%;
  bottom: 60px;
}
#question-balls > span {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: url("~@/assets/images/ball.png");
  background-size: 100%;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
}

#question-balls > span.gray {
  color: #e7e7e7;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}
#rand-box {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 780px;
  height: 582px;
  background: url("~@/assets/images/rand_box_bg.png");
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#rand-number {
  font-size: 200px;
  color: #a29bfe;
}

#rand-btns {
  width: 500px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#rand-btns > span,
#question-btns > span {
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

#rand-btns > span.start {
  background-color: #00b894;
}

#rand-btns > span.stop,
#question-btns > span.back {
  background-color: #ff7675;
}
#rand-btns > span.reset {
  background-color: #ffbe76;
}

#rand-btns > span.jump,
#question-btns > span.show-answers {
  background-color: #6ab04c;
}

#top-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  background: url("~@/assets/images/top_mask_bg.jpg");
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

#question-box {
  width: 1328px;
  height: 744px;
  background: url("~@/assets/images/question_box_bg.png");
  display: flex;
  justify-content: center;
  align-items: center;
}
#question-box #right {
  margin-left: 30px;
}
#question-box #right span {
  display: block;
  font-size: 50px;
  font-weight: 900;
  line-height: 70px;
}

.show {
  display: block;
}
.hide {
  display: none !important;
}

#question-btns {
  width: 500px;
  display: flex;
  justify-content: space-around;
}
</style>
